<template>
  <div id="mall">
    <common-dialog
      :operateType="operateType"
      :isShow="isShow"
      :operateFormLabel='operateFormLabel'
      :operateForm='operateForm'
      :formLabel='formLabel'
      :seachForm='seachForm'
      @comfirm='comfirm'
      @cancel='cancel'
    ></common-dialog>
    <common-headtls
      :formLabel='formLabel'
      :seachForm='seachForm'
      @addUser='addUser'
      @getList='getList'
    ></common-headtls>
    <common-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList"
      @edit="editUser"
      @del="delUser"
    ></common-table>
  </div>
</template>

<script>
import CommonForm from '@/components/content/commonform/CommonForm'
import CommonTable from '@/components/content/commonTable/CommonTable'
import CommonDialog from '@/components/content/commonDialog/CommonDialog'
import CommonHeadtls from '@/components/content/commonHeadtls/CommonHeadtls'
export default {
  name: "Mall",
  data() {
    return {
      operateType: 'add', 
      isShow: false,
      // 对话框表单标签
      operateFormLabel: [
        {
          model: 'goodsName',
          label: '商品名称',
          type: 'input'
        },
        {
          model: 'price',
          label: '商品价格',
          type: 'input'
        },
        {
          model: 'stock',
          label: '库存',
          type: 'input'
        },
        {
          model: 'category',
          label: '商品类别',
          type: 'select',
          opts: [
            {
              label: '衣服',
              value: '衣服',
            },
            {
              label: '裤子',
              value: '裤子'
            }
          ]
        },
        {
          model: 'date',
          label: '上架日期',
          type: 'date'
        },
        {
          model: 'sales',
          label: '销售量',
          type: 'input'
        }
      ],
      // 编辑的对话框表单数据
      operateForm: {
        id: null,
        goodsName: '',
        price: '',
        stock: '',
        category: '',
        date: '',
        sales: ''
      },
      // 搜索框
      formLabel: [
        {
          model: 'keyword',
          label: '',
          type: 'input'
        }
      ],
      seachForm: {
        keyword: ''
      },
      // table展示部分
      tableData: [
        {
          page: 1,
          id: 1,
          goodsName: '南极人牛仔裤',
          price: '148.00',
          stock: 1000,
          category: '裤子',
          date: '2016-05-02',
          sales: 312
        },
      ],
      tableLabel: [
        {
          prop: 'goodsName',
          label: '商品名称'
        },
        {
          prop: 'price',
          label: '商品价格'
        },
        {
          prop: 'stock',
          label: '库存'
        },
        {
          prop: 'category',
          label: '商品类别'
        },
        {
          prop: 'date',
          label: '上架日期',
          // width: 200
        },
        {
          prop: 'sales',
          label: '销售量',
          // width: 320
        },
      ],
      config: {
        page: 1,
        total: 300
      },
      // 记录当前row
      currentRow: {}
    }
  },
  components: {
    CommonForm,
    CommonTable,
    CommonDialog,
    CommonHeadtls
  },
  methods: {
    // dialog组件
    comfirm() {
      this.isShow = false
      if(this.operateType === 'add') {
        console.log('发起了添加请求')
      }else {
        console.log('发起了修改请求')
      }
    },
    cancel() {
      this.isShow = false
      console.log('点击了取消')
    },
    // 新增用户
    addUser() {
      this.isShow = true
      this.operateType = 'add'
      this.operateForm =  {
        name: '',
        stock: '',
        category: '',
        date: '',
        sales: ''
      }
    }, 
    getList(name = '') {
      let tableData = this.tableData
      // 模拟搜索 待nodejs后端写好后进行数据请求
      if(name === name + '') {
        console.log('发起搜索请求,关键字:' , name)
      }
      else {
        console.log('发起获取页面请求,页码:' , name)
      }
    },
    editUser(row) {
      this.isShow = true
      this.operateType = 'edit'
      // 这里如何让他单向绑定 点击确定之后在赋值
      // this.currentRow = row
      this.operateForm = row
    },
    delUser(row) {
      this.$confirm("永久删除该项数据?","警告",{
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        console.log("确定了")
        this.tableData.forEach((value,index,array) => {
          if(value.id === row.id) {
            array.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      },rej => {
        console.log("取消了")
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>